<style>
    .panel {
        width: 1240px;
        margin: auto;
    }

    .contents {
        align-items: center;
        margin: 20px auto 30px;
        width: 1240px;
        min-height: calc(80vh);
        padding-bottom: 30px;
        background: #fff;
        box-shadow: 0 4px 8px 0 rgba(17, 31, 65, 0.11);
        border-radius: 6px;
    }

    .title {
        display: flex;
        padding-top: 30px;
        align-items: center;
        margin-bottom: 20px;
    }

    .title .devider {
        margin-left: 30px;
        width: 4px;
        height: 16px;
        margin-top: 0;
        background: linear-gradient(150deg, #79c6ff, #4f99f5 44%, #2747dc);
    }

    .title-name {
        height: 22px;
        font-size: 18px;
        font-weight: 500;
        color: #333;
        line-height: 22px;
        margin-left: 6px;
    }

    .contents .record-title {
        display: flex;
        margin-left: 40px;
    }

    .el-select {
        width: 140px;
        border-radius: 6px;
    }

    .el-select:not(.no-height,.pager-select) {
        line-height: 36px !important;
    }

    .el-select {
        display: inline-block;
        position: relative;
    }

    .record-body[data-v-3e949a52] {
        margin-left: 20px;
    }

    .content-sendrecord-item {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 16px;
    }

    .content-item {
        height: 180px;
        background: #fff;
        border-radius: 6px;
        border: 1px solid #d6d6da;
        width: 22% !important;
        margin-left: 20px;
        margin-top: 20px;
    }

    .content-item .preview_title {
        justify-content: center;
        cursor: pointer;
    }

    .content-item .preview_title .tip1 {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 22px;
        font-weight: 400;
        line-height: 22px;
        text-align: center;
        margin-top: 4px;
        font-size: 22px;
        color: #333;
    }

    .content-item .preview_title .tip {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .content-item .preview_title .tip2 {
        font-size: 40px;
        color: #333;
        font-weight: 500;
        text-align: center;
        height: 50px;
        line-height: 50px;
    }

    .content-item .preview_title .tip3 {
        font-size: 20px;
        color: #333;
        font-weight: 500;
        text-align: center;
        margin-left: 4px;
        height: 50px;
        line-height: 58px;
    }

    .content-item .divider {
        height: 1px;
        border: 1px #d6d6da;
        background: #d6d6da;
        margin-top: 18px;
    }

    .content-item .send-status {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 45px;
        height: 45px;
    }

    .content-item .send-status .status {
        height: 18px;
        font-size: 13px;
        font-weight: 400;
        color: #999;
        line-height: 18px;
        text-align: center;
        margin-right: 6px;
    }

    .content-item .cancel {
        width: 40px;
        height: 26px;
        display: flex;
        justify-content: flex-end;
        cursor: pointer;
    }

    .content-item .send-status .status-time {
        display: flex;
        align-items: center;
        margin-right: 4px;
        width: 78px;
        height: 24px;
        background: #3d7fff;
        border-radius: 2px;
    }

    .content-item .send-status .status1 {
        height: 20px;
        font-weight: 400;
        color: #fff;
        font-size: 12px;
        line-height: 20px;
    }

    .date-picker-salary .el-input__prefix {
        text-align: right;
        right: 5px;
        position: absolute;
        top: 0px;
    }

    #add-form {
        line-height: 32px;
    }
    .pages{
        margin: 0 20px;
    }
    .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{
        background-color: #3d7fff;
        border-color: #3d7fff;
    }
</style>
<div class="panel panel-default panel-intro">
    <div class="">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div class="contents">
                        <div class="title">
                            <div class="devider"></div>
                            <div class="title-name">发送记录</div>
                        </div>

                        <div class="record-title">
                            <form id="add-form" class="form-horizontal" role="form" data-toggle="validator"
                                  method="POST"
                                  action="">
                                <div style="width: 150px;display: inline-block">
                                    <div class="el-date-editor date-picker-salary el-input el-input--prefix el-input--suffix el-date-editor--year"
                                         style="position: relative">
                                        <input id="c-timingtime" class="form-control datetimepicker"
                                               data-date-format="YYYY" data-use-current="true"
                                               name="row[timingtime]"
                                               type="text" value="{$year1}">
                                        <span class="el-input__prefix"><i class="fa fa-calendar-times-o"></i></span>
                                    </div>
                                </div>
                                <div class="el-select time" style="margin-left: 20px;">
                                    <select id="c-flag" class="form-control selectpicker">
                                        <option value="0" {if $year2==0}selected{/if}>全部</option>
                                        {for start="1" end="13"}
                                        {if $i<10}
                                        <option value="0{$i}" {if $year2==$i}selected{/if}>{$i}月</option>
                                        {else/}
                                        <option value="{$i}" {if $year2==$i}selected{/if}>{$i}月</option>
                                        {/if}
                                        {/for}
                                    </select>
                                </div>
                            </form>
                        </div>
                        <div class="record-body">
                            <div class="content-sendrecord-item">
                                {foreach name="list" item="vo"}
                                {if empty($vo['timing'])}
                                <a class="content-item " href="{:url('info',['id'=>$vo['id']])}" >
                                    <div class="cancel"></div>
                                    <div class="preview_title">
                                        <div class="tip1"> {$vo.times1}年{$vo.times2}月{$vo.type}</div>
                                        <div class="tip">
                                            <div class="tip2">{$vo.number}</div>
                                            <div class="tip3">人</div>
                                        </div>
                                    </div>
                                    <div class="divider"></div>
                                    <div class="send-status"><img
                                            src="__CDN__/assets/addons/kupay/img/sendsoks.png"
                                            style="margin-right: 6px; width: 16px; height: 16px;">
                                        <div class="status" style="color: rgb(102, 102, 102);">已发送
                                        </div>
                                        <div class="status">发送时间:</div>
                                        <div class="status">{$vo.newtimes}</div>
                                    </div>
                                </a>
                                {else/}
                                <a class="content-item " href="{:url('info',['id'=>$vo['id']])}" >
                                    <div class="delete-place" style="height: 26px;"></div>
                                    <div class="preview_title">
                                        <div class="tip1">
                                            <div class="timetip"></div>
                                            {$vo.times1}年{$vo.times2}月{$vo.type}
                                        </div>
                                        <div class="tip">
                                            <div class="tip2">{$vo.number}</div>
                                            <div class="tip3">人</div>
                                        </div>
                                    </div>
                                    <div class="divider"></div>
                                    <div class="send-status">
                                        <div class="status-time"><img src="__CDN__/assets/addons/kupay/img/dingshi.png"
                                                                      style="margin-left: 4px; margin-right: 3px;">
                                            <div class="status1">定时发送</div>
                                        </div>
                                        <div class="status2 status">将于</div>
                                        <div class="status2 status">{:date('Y-m-d H:i',$vo['timing'])}</div>
                                        <div class="status2 status">发送</div>
                                    </div>
                                </a>
                                {/if}

                                {/foreach}


                            </div>
                            <div class="pages">{$list->render()}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<form id="datetimes"  method="GET"
      action="">
    <input type="hidden" id="year1" value="{$year1}" name="year1">
    <input type="hidden" id="year2" value="{$year2}" name="year2">
</form>
